<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
     <title>
          	新的订单
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"  />
</head>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.3.js"></script>
 <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  			
$(".adderss").toggle(function(){
		//根据this取子元素值
		 var input1=$(this).find('input').val();
		 var input2=$(this).find('div').find('input').val();
		$("#adderss"+input1).css("display","block");
		var url="${pageContext.request.contextPath}/AddressController/getAddress.action";
		var val={"id":input2};
		$.post(url,val,function(data){
				var address=data.address;
				if(address==null){
			$("#adderss"+input1).html('<h4>获取地址信息失败<h4>');
				}else{
		$("#adderss"+input1).html(
		"<span>联系人:"+address.name+"</span>&nbsp;&nbsp;&nbsp;<span>电话:"+address.phonenum+"</span><br><span>地址:"+address.address+"</span>"
		);}
		});
		
		
},function(){
		var id=$(this).find('input').val();
		$("#adderss"+id).css("display","none");
});
$(".submitbtn").click(function(){
	var id=$(this).find("input").val();
	var url="${pageContext.request.contextPath}/OrderController/updateOrder.action";
	var val={"id":id,"state":1};
	$.post(url,val,function(){
	
	});
	$("#orderdiv"+id).css("display","none");
});
$(".closebtn").toggle(function(){
	var id=$(this).find("input").val();
	$("#closediv"+id).css("display","block");
	/*
	$("#orderdiv"+id).css("display","none"); */
	
},function(){
var id=$(this).find("input").val();
	$("#closediv"+id).css("display","none");
});
$(".cancel").click(function(){
	/* 获取父类元素 */
	var div=$(this).parent().addClass("closediv");
	div.css("display","none");
	
});
$(".confirm").click(function(){
	/* 获取父类元素 */
	var div=$(this).parent().addClass("closediv");
	var id=div.find("input").val();
	var remarks=div.find("textarea").val();
	if(remarks==null||remarks==""){
	alert("取消原因不能为空");
	return false;
	}
	var url="${pageContext.request.contextPath}/OrderController/updateOrder.action";
	var val={"id":id,"state":4,"remarks":remarks};
	$.post(url,val,function(){
		
	});
	div.css("display","none");
	$("#orderdiv"+id).css("display","none");
	
});
});
</script>
<body style="width: 100%;height: 100%">
    	<h3 style="margin-left:44%">新的订单</h3>
    	<c:if test="${orders!=null }">
    	<c:forEach items="${orders }" var="order" varStatus="list">
    	<div class="order" id="orderdiv${order.id}">
          <div style="width: 35%;float: left">
            <span>商品名称:</span>  
            <a href="${pageContext.request.contextPath}/commodity/getComm.action?id=${order.commid}" target="_blank">${order.commname}</a><br>
            <span>商品价格: ${order.price}元</span>
               <br> <span>购买用户:${order.username }</span>
          </div>
          <div style="width: 55%;float: left;">
            <span>数量:${order.num }</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span>下单时间:<fmt:formatDate value="${order.cdate }" pattern="yyyy-MM-dd HH:mm:ss"/> </span>
           <br><span>备注:${order.remarks}</span>
           		<br><span class="adderss">查看地址信息
           		<input type="hidden" value="${order.id}">
           		<div>
           		<input type="hidden" value="${order.addressid}">
           		</div>
           		</span>
          </div>
          <div style="width: 10%;float: left;background:#FF7F00 ">
              <div  class="submitbtn">
                      	      确认订单
                    <input type="hidden" value="${order.id}">
			</div>
              <div class="closebtn">
              			      取消订单
             		<input type="hidden" value="${order.id}">
              </div>
          </div>
        </div>
        <div  id="adderss${order.id }" style="width: 70%;height: 4.5%;margin: auto;border:1px solid #FF7F00;border-top:none;display:none">
         </div>
         <!-- 取消订单弹窗 -->
    		<div class="closediv" id="closediv${order.id }">
    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    				<span style="font-weight: 600">请填写您取消订单的原因</span><br>
    				<textarea rows="3" cols="60" style="margin-left: 7%"></textarea>
    				<br>
    				<button style="margin-left:75%;margin-top: 4.5%" class="confirm">确认
    				</button>
    				<button class="cancel">取消
    				</button>
    				<input type="hidden" value="${order.id}">
              </div>
        </c:forEach>
    	</c:if>
    	<c:if test="${orders==null }">
    		<h3 style="margin-left: 40%;margin-top:5%">暂时没有新的订单</h3>
    	</c:if>
    		
    	   <!-- 翻页 -->
      <div style="margin-left: 72%;margin-top: 3%">
      		<a style="color:#FF7F00" href="${pageContext.request.contextPath}/OrderController/listOrder.action?page=${page-1}">上一页</a>
      		当前第<span style="color:#FF7F00">${page+1}</span>页
      		<a style="color:#FF7F00" href="${pageContext.request.contextPath}/OrderController/listOrder.action?page=${page+1}">下一页</a>
      </div>
 </body>
   <style>
   .closediv{
   border:1px solid #FF7F00;
   position: relative;
	z-index: 999;
	top: 5px;
	left: 30%;
	width:40%;
	height:17%;
	display:none;
   }
   .adderss{
   color:blue;
   }
    .adderss:hover{
   color:#0000CD;cursor: pointer;
   }
.submitbtn{
    height: 50%;text-align: center;color: #fff;padding-top:5%;width: 100%
   }
.submitbtn:hover{
  background: #FFA500;cursor: pointer;
}
.closebtn{
    height: 50%;text-align: center;color: #fff;padding-top:5%;width: 100%
   }
.closebtn:hover{
  background: #FFA500;cursor: pointer;
}
.order{
  width: 70%;height: 10%;margin: auto;border:1px solid #FF7F00;margin-top:1%;
}	  
.order a{
  font-size: 15px;
}   

   </style>
</html>